<template>
    <div>
        <h2 class="title">订单查询</h2>
        <div class="searchBox">
            <input type="search" placeholder="请输入完整的订单号"  v-model="orderNum" @search="search()">
            <van-icon name="search" size='20px' class="searchButton" @click="search()" />
        </div>
        <div class="list" v-if="listArr.length">
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height:50vh">
                <ul>
                    <li v-for="(item,index) in listArr" :key="index">
                        <div class="liHead">
                            <p style="font-size:14px;color:#909399;">{{item.date}}</p>
                            <p><span style="font-weight:600" :class="titleColorFormat(item)">{{item.state}}</span></p>
                        </div>
                        <div>
                            <p style="word-break: break-all"><span class="spanLabel">订单号：</span><span class="spanValue">{{item.orderNum}}</span></p>
                        </div>
                        <div>
                            <p><span class="spanLabel">商品名：</span><span class="spanValue">{{item.productName}}</span></p>
                            <p><span class="spanLabel">地址：</span><span class="spanValue">{{item.address}}</span></p>
                            <p><span class="spanLabel">姓名：</span><span class="spanValue">{{item.name}}</span></p>
                            <p><span class="spanLabel">联系电话：</span><span class="spanValue">{{telFormat(item.tel)}}</span></p>
                        </div>
                        <div v-if="item.expressCompany&&item.expressNum">
                            <p><span class="spanLabel">快递公司：</span><span class="spanValue">{{item.expressCompany}}</span></p>
                            <p><span class="spanLabel">快递单号：</span><span class="spanValue">{{item.expressNum}}</span></p>
                        </div>
                        <div style="margin:0;padding-top:10px;border-top: 1px solid #EBEEF5;margin-top:10px">
                            <p>客服电话&nbsp;<a :href="'tel:'+item.serviceNum" class="phone">{{item.serviceNum}}</a></p>
                            <span v-if="item.state=='待发货'" class="cancel" @click="showPopup(item)">取消</span>
                        </div>
                    </li>
                </ul>
            </van-pull-refresh>
        </div>
        <div v-else>
            <p style="text-align:center;padding-top:5vh;">暂无数据</p>
        </div>
        <van-dialog
            v-model="show"
            show-cancel-button
            closeOnClickOverlay
            title="取消订单"
            style="width:300px"
            :before-close="cancelOrder"
        >
            <div class="popupGetCode">
                <p>{{telFormat(tel)}}</p>
                <span :class="getCodeTxt=='获取验证码'?'getCode':'getCode disabled'" @click="getCode()">{{getCodeTxt}}</span>
            </div>
            <div class="popupInput">
                <input type="text" placeholder="请输入验证码" v-model="YZMcode">
            </div>
        </van-dialog>
    </div>
</template>

<script>
import { setInterval, clearInterval } from 'timers';
import { debug } from 'util';
export default {
  data() {
    return {
        second:60,
        YZMcode:'',
        getCodeTxt:'获取验证码',
        tel:'',
        orderNum:'',
        count: 0,
        isLoading: false,
        show: false,
        id:'',
        lifeId:'',
        aliPayUserId:'',
        listArr:[
            //   {state:'待发货',orderNum:'xxxxxxxxxxxxxxxxxxxxxxx',date:'2019-08-09',address:'广东省珠海市香洲区吉莲路19栋A座6层0678',name:'AAA',tel:'131xxxx1313',expressCompany:'顺丰',expressNum:'SFxxxxxxxxxxxx',serviceNum:'0755-88888888',productName:'钢铁侠MK47最新版xxxxxx限量珍藏版高级红'}
        ]
    };
  },
  methods:{
      showPopup(item){
          this.show = true;
          this.tel = item.tel;
          this.id = item.id;
          this.lifeId = item.lifeId;
          this.aliPayUserId = item.aliPayUserId;
      },
      onRefresh() {
            var url = 'order/findByOrderNo';
            var params ={orderNo:this.orderNum,pageNo:'1'}
            this.post(url,params)
            .then(resp => {
                this.isLoading = false;
                this.listArr = [];
                if(resp.data.data.content&&resp.data.data.content.length){
                    resp.data.data.content.forEach(item => {
                        let obj = {
                            state:this.stateFormat(item.orderStatus),
                            orderNum:item.orderNo,
                            date:item.borrowTime.substring(0,10),
                            address:item.location,
                            name:item.client,
                            tel:item.phone,
                            expressCompany:item.deliveryCompany?item.deliveryCompany:'',
                            expressNum:item.deliveryOrder?item.deliveryOrder:'',
                            serviceNum:item.tel,
                            productName:item.productName,
                            id:item.id,
                            lifeId:item.lifeId,
                            aliPayUserId:item.aliPayUserId
                        }
                        this.listArr.push(obj)
                    });
                }
                this.$toast('刷新成功');
            })
            .catch(err=>{
                this.isLoading = false;
                this.$toast('刷新失败，请重试');
            })
      },
      search(){
            this.listArr = [];
            var url = 'order/findByOrderNo';
            var params ={orderNo:this.orderNum,pageNo:'1'}
            this.post(url,params)
            .then(resp => {
                console.log(resp);
                if(resp.data.data.content&&resp.data.data.content.length){
                    resp.data.data.content.forEach(item => {
                        let obj = {
                            state:this.stateFormat(item.orderStatus),
                            orderNum:item.orderNo,
                            date:item.borrowTime.substring(0,10),
                            address:item.location,
                            name:item.client,
                            tel:item.phone,
                            expressCompany:item.deliveryCompany?item.deliveryCompany:'',
                            expressNum:item.deliveryOrder?item.deliveryOrder:'',
                            serviceNum:item.tel,
                            productName:item.productName,
                            id:item.id,
                            lifeId:item.lifeId,
                            aliPayUserId:item.aliPayUserId
                        }
                        this.listArr.push(obj)
                    });
                }
            })
            .catch(()=>{
                this.$toast('查询失败，请重试');
            })
      },
      titleColorFormat(item){
          if(item.state=='已完成')return 'green';
          if(item.state=='已取消')return 'gray';
          if(item.state=='待发货')return 'yellow';
          if(item.state=='待收货')return 'orange';
      },
      stateFormat(str){
          if(str=='ISSUE')return '已完成';
          if(str=='PAY')return '待发货';
          if(str=='CANCEL')return '已取消';
          if(str=='SENT')return '待收货';
      },
      telFormat(str){
          var reg = /^(\d{3})\d{4}(\d{4})$/;
          str = str.replace(reg, "$1****$2");
          return str;
      },
      getCode(){
          let time = null;
          let url = 'order/getYZM/'+this.id;
          let params = {
              aliPayUserId:this.aliPayUserId,
              lifeId:this.lifeId
          }
          this.post(url,params)
          .then(res=>{
              if(res.data.status == '00'){
                  time = setInterval(()=>{
                      this.getCodeTxt=this.second+'s后重发';
                      this.second--;
                      if(this.second<0){
                          clearInterval(time);
                          this.getCodeTxt = '获取验证码';
                          this.second = 60;
                      }
                  },1000);
              }else{
                  this.$toast(res.data.msg);
              }
              
          })
          .catch(()=>{
              this.$toast('获取失败，请重试');
          })
      },
      cancelOrder(action,done){
        if(action=='confirm'){
            if(!this.YZMcode){
                this.$toast('请输入验证码');
                done(false);
            }else{
                let url = 'order/cancelByQuery/'+this.id;
                let params = {
                    aliPayUserId:this.aliPayUserId,
                    lifeId:this.lifeId,
                    yzm:this.YZMcode
                }
                this.post(url,params)
                .then(res=>{
                    if(res.data.status=='00'){
                        this.$toast('取消成功');
                        done();
                        var url = 'order/findByOrderNo';
                        var params ={orderNo:this.orderNum,pageNo:'1'}
                        this.post(url,params)
                        .then(resp => {
                            this.isLoading = false;
                            this.listArr = [];
                            if(resp.data.data.content&&resp.data.data.content.length){
                                resp.data.data.content.forEach(item => {
                                    let obj = {
                                        state:this.stateFormat(item.orderStatus),
                                        orderNum:item.orderNo,
                                        date:item.borrowTime.substring(0,10),
                                        address:item.location,
                                        name:item.client,
                                        tel:item.phone,
                                        expressCompany:item.deliveryCompany?item.deliveryCompany:'',
                                        expressNum:item.deliveryOrder?item.deliveryOrder:'',
                                        serviceNum:item.tel,
                                        productName:item.productName,
                                        id:item.id,
                                        lifeId:item.lifeId,
                                        aliPayUserId:item.aliPayUserId
                                    }
                                    this.listArr.push(obj)
                                });
                            }
                        })
                        .catch(err=>{
                            this.$toast('数据刷新失败，请重试');
                        })
                    }else{
                        this.$toast(res.data.msg);
                        done(false);
                    }
                })
                .catch(()=>{
                    this.$toast('取消订单失败，请重试')
                })
            }
        }else{
            done();
        }
      },
  },
  mounted(){

  }
}
</script>

<style scoped>
.title{
    padding: 15px 0;
    text-align: center;
    background: #fff;
    font-size: 16px;
    box-shadow: 0 3px 5px #ebedf0;
    margin-bottom: 15px;
    color:#303133
}
.searchBox{
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 94%;
    margin: 0 auto;
    box-shadow: 0 5px 5px #ebedf0;
    border-radius: 5px;
    height: 40px;
    overflow: hidden;
    margin-bottom: 15px;
}
.searchBox>input{
    width: calc(100% - 30px);
    height: 100%;
    padding: 5px;
    padding-left: 20px
}
.searchButton{
    padding:0 5px;
}
.list{
    position: absolute;
    top: 127px;
    bottom: 0;
    left: 3%;
    right: 3%;
    overflow: scroll
}
li{
    background: #fff;
    padding: 15px 10px;
    border-radius: 5px; 
    box-shadow: 0 5px 5px #ebedf0;
    margin-bottom:15px;
    color: #606266;
}
li>div{
    /* margin-bottom: 20px */
    line-height: 24px;
}
li>div:first-child,li>div:last-child,li>div:nth-child(2){
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.liHead{
    border-bottom:1px solid #EBEEF5;
    padding-bottom: 10px;
    margin-bottom: 10px
}
.gray{
    color: #ccc;
}
.green{
    color:#17c37b;
}
.orange{
    color:#f68657;
}
.yellow{
    color: #f6b352
}
.cancel{
   background: #ec8080;
    color: #fff;
    border-radius: 5px;
    padding: 5px 20px; 
}
.popupGetCode{
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    padding-top: 20px;
    margin-bottom: 15px;
    font-size: 14px;
    width: 80%;
    margin:0 auto 15px;
    align-items: center
}
.popupInput{
    padding: 0 20px;
    margin-bottom: 10px;
    font-size: 14px;
    width: 80%;
    margin:0 auto 15px;
}
.popupInput>input{
    width: 100%;
    border: 1px solid #ccc;
    height: 40px;
    box-sizing: border-box;
    padding:5px 10px;
    border-radius: 5px;
}
.getCode{
    border: 1px solid ;
    width: 92px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 5px;
    color: #f1a772;
}
.disabled{
    color: #fff;
    background: #ccc;
}
.phone{
    display: flex;
    align-items: center;
    color: #72bdf1
}
.spanLabel{
    width: 70px;
}
.spanValue{
    width: calc(100% - 70px);
    word-break: break-all
}
li>div>p{
    display: flex
}
input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none;
}
</style>